<template>
  <el-drawer
    v-model="state.isModalDeleteVisible"
    size="900"
    class="custom-drawer"
    :lock-scroll="false"
    :destroy-on-close="true"
    @close="
      () => {
        state.isModalDeleteVisible = false;
      }
    "
  >
    <template #header>
      <span class="font-bold">信息资源部</span>
    </template>

    <el-scrollbar max-height="800px" v-loading="state.loading">
      <div class="flex flex-col justify-center mr-[15px]">
        <div class="title pt-[10px]">
          <el-icon color="rgba(80, 92, 108, 1)">
            <ElementPlus />
          </el-icon>
          <span class="ml-[11px]">正外编</span>
        </div>

        <el-row :gutter="12" class="mb-[20px]">
          <el-col :span="6" v-for="(item, index) in state.dxternalEditorList" :key="index">
            <div
              class="flex flex-col card justify-start"
              :style="{
                cursor: item.value === '0' || item.title === '执行/预算' ? 'not-allowed' : ''
              }"
            >
              <div class="number">{{ item.value }}</div>
              <div class="pt-[10px] title">
                {{ item.title }}
              </div>
            </div>
          </el-col>
        </el-row>

        <el-table :data="state.tableData" border :header-cell-style="headerCellStyle" class="custom-table-wrap">
          <el-table-column prop="name" label="总编制数" width="80" :show-overflow-tooltip="true" />
          <el-table-column prop="name" label="在职人数" width="80" :show-overflow-tooltip="true" />
          <el-table-column prop="address" label="入职中人数" width="100" :show-overflow-tooltip="true" />
          <el-table-column prop="name" label="XX届应届生需求数" :show-overflow-tooltip="true" width="140" />
          <el-table-column prop="name" label="调入该一级部门流程中人数" :show-overflow-tooltip="true" width="190" />
          <el-table-column prop="address" label="已冻结编制数" width="110" :show-overflow-tooltip="true" />
          <el-table-column prop="total" :show-overflow-tooltip="true">
            <template #header>
              <div class="flex flex-row items-center">
                <div class="flex items-center mr-[6px]">
                  <el-icon color="rgba(80, 92, 108, 1)">
                    <InfoFilled />
                  </el-icon>
                </div>
                <span>剩余编制数</span>
              </div>
            </template>
            <template v-slot="scope">
              <!-- 剩余编制数为负数时展示红色 -->
              <span
                :style="{
                  color: scope.row.total <= 0 ? 'rgba(212, 48, 48, 1)' : ''
                }"
              >
                {{ scope.row.total }}
              </span>
            </template>
          </el-table-column>
        </el-table>

        <el-row class="mt-[13px]">
          <el-col>
            <div class="flex flex-row items-center tips mr-[80px]">
              <div class="flex items-center mr-[10px]">
                <el-icon color="rgba(80, 92, 108, 1)">
                  <InfoFilled />
                </el-icon>
              </div>
              <span> 注：剩余编制数 = 总编制数 - 在职人数 - 入职中人数 - 应届生需求数 - 调入该部门流程中人数- 已冻结编制数</span>
            </div>
          </el-col>
        </el-row>

        <div class="title pt-[25px]">
          <el-icon color="rgba(80, 92, 108, 1)">
            <ElementPlus />
          </el-icon>
          <span class="ml-[11px]">外包</span>
        </div>

        <el-row :gutter="12">
          <el-col :span="5" v-for="(item, index) in state.outsourceList" :key="index">
            <div class="flex flex-col card justify-start">
              <div class="number">{{ item.value }}</div>
              <div class="pt-[10px] title">
                {{ item.title }}
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="title pt-[25px]">
          <el-icon color="rgba(80, 92, 108, 1)">
            <ElementPlus />
          </el-icon>
          <span class="ml-[11px]">关键指标</span>
        </div>

        <el-row :gutter="12">
          <el-col :span="5" v-for="(item, index) in state.targetList" :key="index">
            <div class="flex flex-col card justify-start">
              <div class="number">{{ item.value }}</div>
              <div class="pt-[10px] title">
                {{ item.title }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const state = reactive({
  row: {},
  isModalDeleteVisible: false,
  loading: false,
  // 正外编
  dxternalEditorList: [
    {
      title: "总人数",
      value: "0"
    },
    {
      title: "待入职",
      value: "20"
    },
    {
      title: "离职中",
      value: "12"
    },
    {
      title: "已离职",
      value: "56"
    },
    {
      title: "近三月待转正人数",
      value: "31"
    },
    {
      title: "近三月合同续签人数",
      value: "47"
    },
    {
      title: "跨部门调入调出人数",
      value: "34"
    },
    {
      title: "执行/预算",
      value: "450/500"
    }
  ],
  tableData: [
    {
      date: "2016",
      name: "20",
      address: "29",
      total: 0
    }
  ],
  // 外包
  outsourceList: [
    {
      title: "总人数",
      value: "500"
    },
    {
      title: "编制数",
      value: "20"
    },
    {
      title: "待入职",
      value: "12"
    },
    {
      title: "离职中",
      value: "56"
    },
    {
      title: "执行/预算",
      value: "450/500"
    }
  ],
  // 关键指标
  targetList: [
    {
      title: "离职率",
      value: "10%"
    },
    {
      title: "应届生比例",
      value: "20%"
    },
    {
      title: "应届生离职率",
      value: "5%"
    },
    {
      title: "985/211占比",
      value: "30%"
    },
    {
      title: "干部健康度",
      value: "1:1:2"
    }
  ]
});

const openDialog = row => {
  state.row = row;
  state.isModalDeleteVisible = true;
};

defineExpose({ openDialog });
const headerCellStyle = () => ({
  color: "rgba(87, 94, 103, 1)",
  fontSize: "13px"
});
</script>

<style lang="scss" scoped>
.card {
  color: rgba(80, 80, 80, 1);
  background-color: rgba(243, 248, 252, 1);
  box-shadow: rgba(227, 235, 241, 1) solid 1px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 150%;
  padding: 8px 16px;
  margin-top: 12px;
  cursor: pointer;
  .number {
    color: rgba(78, 89, 105, 1);
    font-size: 18px;
    line-height: 150%;
    font-weight: bold;
  }
  .title {
    color: rgba(134, 144, 156, 1);
    font-size: 13px;
    line-height: 150%;
  }
}
.el-col-5 {
  width: 20%;
  max-width: 20%;
  flex: 0 0 20%;
}

.tips {
  padding: 9px;
  background-color: rgba(243, 244, 245, 1);
  box-shadow: rgba(219, 222, 225, 1) solid 1px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: rgba(87, 94, 103, 1);
}

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 174px;
  background-color: rgba(250, 250, 250, 1);
}

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  color: rgba(87, 94, 103, 1);
  font-size: 15px;
  line-height: 150%;
  font-weight: normal;
}
:deep(.el-table--border .el-table__cell) {
  border: none;
}
.el-table {
  box-shadow: rgba(229, 230, 235, 1) solid 1px;
}
.custom-table-wrap {
  border: 1px solid rgba(229, 230, 235, 1);
}
:deep(.el-table th) {
  background-color: rgba(250, 250, 250, 1);
}
</style>
